<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderCustom('审批工作流',~{::style})">
    <style>
        .file-footer-caption {
            margin-bottom: 5px!important;
        }
        .file-drop-zone-title {
            padding: 25px 10px!important;
        }
    </style>
</head>
<body>
<div class="ch-container">
    <div class="row">
        <div id="content" class="col-md-12 col-sm-12" style="padding:2px;width: 99%;">
            <div class="row">
                <div class="box col-sm-12" style="margin-top:5px;" >
                    <form class="form-horizontal" >

                        <fieldset style="border-top: 1px solid rgb(229, 229, 229);-webkit-padding-start: 25px">
                            <legend style="text-align: left;font-size: 14px;border: 0;width: auto;"><span style="font-weight:bold;">录入审批结果</span></legend>

                            <div th:if="${nodeInfo.judgment==1}" class="form-group">
                                <label class="control-label col-sm-2"><i class="fa fa-asterisk fa-1" style="color: red;" title="必填项" aria-hidden="true"></i>结果判定:</label>
                                <div class="col-sm-6">
                                    <select name="resultsId" id="resultsId" class="form-control" >
                                        <option value="" >请选择判定结果</option>
                                        <option value="1">问题属实Positively Verified</option>
                                        <option value="2">问题不属实Negatively Verified</option>
                                        <option value="3">无法判定Impossible to verify</option>
                                    </select>
                                </div>
                            </div>
                            <div th:if="${listReason!=null}" class="form-group">
                                <label class="control-label col-sm-2"><i class="fa fa-asterisk fa-1" style="color: red;" title="必填项" aria-hidden="true"></i>返还课时:</label>
                                <div class="col-sm-2 radio-inline">
                                    <label><input type="radio" name="returnClass" value="1" checked> 同意</label>&emsp;&emsp;
                                    <label><input type="radio" name="returnClass" value="0"> 不同意</label>
                                </div>
                                <label class="control-label col-sm-2"><i class="fa fa-asterisk fa-1" style="color: red;" title="必填项" aria-hidden="true"></i>返还课时原因:</label>
                                <div class="col-sm-2">
                                    <select name="returnReasonId" id="returnReasonIds" class="selectpicker" title="请选择返还课时原因">
                                        <!--<option value="" >请选择返还课时原因</option>-->
                                        <option th:each="item:${listReason}" th:value="${item.id}" th:text="${item.name}"> </option>
                                    </select>
                                </div>
                                <label class="control-label col-sm-2"><i class="fa fa-asterisk fa-1" style="color: red;" title="必填项" aria-hidden="true"></i>老师课时:</label>
                                <div class="col-sm-2 radio-inline">
                                    <label><input type="radio" name="cancelClass" value="1" checked> 算</label>&emsp;&emsp;
                                    <label><input type="radio" name="cancelClass" value="0"> 不算</label>
                                </div>
                            </div>
                            <div th:if="${listReason==null && nodeInfo.isReturn==1}" class="form-group">
                                <label class="control-label col-sm-2"><i class="fa fa-asterisk fa-1" style="color: red;" title="必填项" aria-hidden="true"></i>老师课时:</label>
                                <div class="col-sm-2 radio-inline">
                                    <label><input type="radio" name="cancelClass" value="1" checked> 算</label>&emsp;&emsp;
                                    <label><input type="radio" name="cancelClass" value="0"> 不算</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-2"><i class="fa fa-asterisk fa-1" style="color: red;" title="必填项" aria-hidden="true"></i>审核意见:</label>
                                <div class="col-sm-10">
                                    <textarea name="content" id="workflowContent" rows="5" class="form-control"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-2">附件:</label>
                                <div class="col-sm-10">
                                    <div class="file-loading">
                                        <label>Preview File Icon</label>
                                        <input id="fileUpload" name="uploadFiles" type="file" multiple>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group" id="inputHidden">
                                <input type="hidden" name="workflowId" id="workflowId" th:value="${workflowId}">
                                <input type="hidden" name="approvalState" id="approvalState" th:value="${approvalState}">
                                <input type="hidden" name="approvalStatusId" id="approvalStatusId" th:value="${approvalId}">
                                <input type="hidden" name="isEnd" id="isEnd" th:value="${nodeInfo.isEnd}">
                                <input type="hidden" name="version" id="version" th:value="${nodeInfo.version}">
                                <div class="col-sm-11 text-center" >
                                    <button type="button" class="btn btn-default btn-md" onclick="layerClose()"> 取消 </button>&nbsp;&nbsp;&nbsp;&nbsp;
                                    <button type="button" class="btn btn-primary btn-md" th:onclick="|submitForm()|"> 保存 </button>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include/onload_js::onloadJSCustom(~{::script})">
    <script src="../../static/lib/bootstrap-fileinput/5.0.8/js/plugins/sortable.min.js" th:src="@{/static/lib/bootstrap-fileinput/5.0.8/js/plugins/sortable.min.js}" type="text/javascript"></script>
    <!-- 如果你想在HTML文件预览中净化HTML内容则要引入purify.min.js is   它必须在fileinput.min.js之前引入 -->
    <script src="../../static/lib/bootstrap-fileinput/5.0.8/js/plugins/purify.min.js" th:src="@{/static/lib/bootstrap-fileinput/5.0.8/js/plugins/purify.min.js}" type="text/javascript"></script>
    <script src="../../static/lib/bootstrap-fileinput/5.0.8/js/fileinput.min.js" th:src="@{/static/lib/bootstrap-fileinput/5.0.8/js/fileinput.min.js}"></script>
    <script src="../../static/lib/bootstrap-fileinput/5.0.8/js/locales/zh.js" th:src="@{/static/lib/bootstrap-fileinput/5.0.8/js/locales/zh.js}"></script>
    <script>
        $(function () {
        });
        $("#fileUpload").fileinput({
            language: 'zh',
            // theme: 'fas',
            uploadUrl:'/workflow/upload/attachment',
            uploadAsync: false,
            browseOnZoneClick: true,
            showUpload: false,
            showCaption: false,
            showBrowse: false,
            dropZoneEnabled: true,
            browseClass: "btn btn-primary btn-md",
            fileType: "any",
            // allowedFileTypes: ['image', 'text', 'video', 'audio', 'flash'],
            allowedFileExtensions: ['jpg', 'jpeg', 'gif', 'png', 'txt','log','pdf','xls','doc','xlsx','docx','swf','mp3','wma','wav','rar','zip','mp4'],
            maxFileSize: 51200, //单位为kb，如果为0表示不限制文件大小
            msgSizeTooLarge: '文件 "{name}" (<b>{size} KB</b>) 超过了允许大小 <b>{maxSize} KB</b>.',
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            layoutTemplates: {
                actionUpload: ''//就是让文件上传中的文件去除上传按钮
//      actionDelete: '',//去除删除按钮
            },
            uploadExtraData: {"lessonId":$("#workflowId").val(),"processSettingId":$("#approvalStatusId").val()},
        }).on('fileuploaded', function(event, data, previewId, index) {
            let response = data.response;
            $("#inputHidden").append('<input type="hidden" name="listFilePath" value="'+response.listFilePath+'">');
            // alert(response.listFilePath)
        }).on('filebatchuploadcomplete', function(event, files, extra) {
            // alert($("input[name='listFilePath']").length);
            /*console.log("event:"+event);
            console.log("files:"+files);
            console.log("extra:"+extra);*/
            // approvalWorkflow();
        }).on('filebatchuploadsuccess',function (event, data, previewId, index) {
            /*var form = data.form, files = data.files, extra = data.extra,
                response = data.response, reader = data.reader;
            console.log("data: "+data);*/
            if (data.jqXHR.statusText==="success"){
                $("#inputHidden").append('<input type="hidden" name="listFilePath" value="'+data.response.listFilePath+'">');
                approvalWorkflow();
            }else {
                layer.msg("上传文件失败",{icon:2});
            }
        });

        let loadIndex;
        function submitForm() {
            loadIndex = layer.load();
            if ($.trim($("#workflowContent").val())===""){
                layer.msg("请输入问题描述",{icon:2});
                $("#workflowContent").select();
                layer.close(loadIndex);
                return false;
            }
            let filesCount = $('#fileUpload').fileinput('getFilesCount');
            // alert(filesCount);
            if (filesCount>0){
                //上传附件，成功回调方法
                $("#fileUpload").fileinput("upload");
                // $("#fileUpload").fileinput('disable');
            }else {
                //没有附件直接提交表单数据
                approvalWorkflow();
            }
            // layer.close(loadIndex);
        }

        function approvalWorkflow() {
            if ($("#resultsIdId").length>0){
                let resultsIdVal=$("#resultsIdId").val();
                if ($.trim(resultsIdVal)===""){
                    layer.msg("请选择判定结果",{icon:2});
                    return false;
                }
            }

            if ($("#returnReasonIds").length>0){
                let returnReasonIdsVal=$("#returnReasonIds").val();
                let returnClassVal=$("input[name='returnClass']:checked").val();
                if (parseInt(returnClassVal)===1){
                    if ($.trim(returnReasonIdsVal)===""){
                        layer.msg("请选择返还课时原因",{icon:2});
                        return false;
                    }
                }else {
                    $("#returnReasonIds").val("")
                }

            }

            let workflowContent=$("#workflowContent").val();
            if ($.trim(workflowContent)===""){
                layer.msg("请输入审批意见",{icon:2});
                return false;
            }
            $.post("/workflow/approval/submit",$("form").serialize(),function (result) {
                if (result.status>0){
                    layer.msg("提交审批结果成功",{icon:1},function() {
                        // layerClose();
                        parent.window.location.reload();
                    });
                }else {
                    layer.msg("提交审批结果失败，请重试",{icon:2},function() {
                        layerClose();
                        // window.location.reload();
                    });
                }
                layer.close(loadIndex);
            },"json");
        }

        //关闭当前layer弹出层
        function layerClose() {
            let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
        }
    </script>
</div>
</body>
</html>